<template>
  <div style="text-align: center;margin: 0 20px; width: 20vw">
    <div>
      <div style="font-size: 25px;font-weight: bold">分布式政务数据中心安全共享平台</div>
      <div style="font-size: 1.5rem;color: grey; text-align: center; margin: 7px 0">请完成注册</div>
    </div>
    <div style="margin-top: 50px">
      <el-input v-model="register.nickName" :prefix-icon="User" type="text"
                placeholder="用户名">
      </el-input>
      <el-select v-model="register.userKind" placeholder="请选择您的用户性质"
                 class="input">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-select v-model="register.roleId" placeholder="请选择您的用户角色" class="input">
        <el-option
            v-for="item in role_info"
            :key="item.roleId"
            :label="item.fullName"
            :value="item.roleId"
        />
      </el-select>

      <div v-if="register.userKind===2">
        <el-input v-model="register.companyName" :prefix-icon="Management" type="text"
                  placeholder="企业名称" class="input">
        </el-input>
        <el-input v-model="register.creditNum" :prefix-icon="Management" type="text"
                  placeholder="企业社会信用号码" class="input">
        </el-input>
      </div>

      <div v-if="register.userKind===0">
        <el-input v-model="register.job" :prefix-icon="Avatar" type="text"
                  placeholder="职务" class="input">
        </el-input>
        <el-input v-model="register.name" :prefix-icon="Management" type="text"
                  placeholder="姓名" class="input">
        </el-input>
        <el-input v-model="register.departId" :prefix-icon="Management" type="text"
                  placeholder="所属部门" class="input">
        </el-input>
        <el-input v-model="register.secondId" :prefix-icon="Management" type="text"
                  placeholder="所属二级机构" class="input">
        </el-input>
      </div>

      <div v-if="register.userKind===1">
        <div style="font-size: 0.8rem;color: grey; text-align: left; margin: 7px 0">以下请任选其二填写</div>
        <el-input v-model="register.idCardNum" :prefix-icon="Management" type="text"
                  placeholder="身份证号码">
        </el-input>
        <el-input v-model="register.mobileNum" :prefix-icon="Management" type="text"
                  placeholder="手机号码" class="input">
        </el-input>
        <el-input v-model="register.emailNum" :prefix-icon="Management" type="text"
                  placeholder="邮箱地址" class="input">
        </el-input>
        <el-input v-model="register.qqNum" :prefix-icon="Management" type="text"
                  placeholder="QQ号码" class="input">
        </el-input>
        <el-input v-model="register.familyAddr" :prefix-icon="Management" type="text"
                  placeholder="家庭住址" class="input">
        </el-input>
        <el-input v-model="register.insuranceCardNum" :prefix-icon="Management" type="text"
                  placeholder="社保卡号" class="input">
        </el-input>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-button @click="register_user" style="width: 80%" type="success" plain>立即注册</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {User, Management, Avatar} from '@element-plus/icons-vue'
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import axios from "axios";

const router = useRouter();

interface register_type {
  nickName: string,
  userKind?: number,
  roleId?: number,
  companyName?: string,
  creditNum?: string,
  departId?: number,
  secondId?: number,
  idCardNum?: string,
  mobileNum?: string,
  emailNum?: string,
  qqNum?: string,
  familyAddr?: string
  insuranceCardNum?: string,
  job?: string,
  name?: string
}

const register = ref<register_type>({nickName: ''})


const role_info = ref<{
  roleId: string,
  fullName: string
}[]>();

axios.get('http://127.0.0.1:8080/api/info/role')
    .then(resp => {
      role_info.value = resp.data;
      console.log(role_info.value);
    })

const options = [
  {
    value: 0,
    label: '政务工作人员',
  },
  {
    value: 1,
    label: '自然人',
  },
  {
    value: 2,
    label: '企业人员',
  },
]

const register_user = () => {

  console.log(JSON.stringify(register.value));

  axios.post("http://127.0.0.1:8080/api/auth/register", register.value, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(resp => {
    if (resp.data.msg === '注册成功') {
      ElMessage({
        message: '注册成功',
        type: 'success',
      })
      router.push("/login")
    } else {
      ElMessage({
        message: '注册失败',
        type: 'error',
      })
      router.push({name: 'register'})
    }
  })
}
</script>

<style scoped>
.input {
  width: 100%;
  margin-top: 10px
}
</style>